<template>
  <div>
    <MainFrame>
      <div slot='content'>
        <div class="top-title">
          电流趋势图
        </div>
        <div style="margin: 10px 0;">
          <el-button type="primary" @click="back" icon="el-icon-back" style="margin-left: 20px;">返回</el-button>
        </div>
        <div style="margin: 20px;">
          <el-date-picker v-model="date" type="date" placeholder="选择日期" @change="request">
          </el-date-picker>
        </div>
        <div style="margin: 20px;">
          <el-row type="flex">
            <el-col :span="3">归属地：{{ location }}</el-col>
            <el-col :span="3">台区号：{{ areaNo }}</el-col>
            <el-col :span="6">日期：{{ date.toLocaleDateString() }}</el-col>
          </el-row>
        </div>
        <div class="page">
          <div id="main" v-bind:style="{width:'100%', height:'500px'}"></div>
        </div>
      </div>
    </MainFrame>
  </div>
</template>
<script>
import MainFrame from '@/components/MainFrame';
import utils from '../ttJs/utils.js'
import { validateData } from '../ttJs/utils.js'
// import echarts from 'echarts'
export default {
  components: {
    MainFrame,
  },
  data() {
    return {
      location: '',
      areaNo: '',
      date: new Date()
    };
  },
  mounted: function() {
    // let self = this; // if (self && !self._isDestroyed) { // setTimeout(() => { // if (self && !self._isDestroyed) // self.init('main') // }, 200); // }
    this.getAreaInfo();
    this.request();
    var echarts = require('echarts');
    setTimeout(() => {
      window.onresize = function() {
        echarts.getInstanceByDom(document.getElementById('main')).resize();
      }
    }, 20)
  },
  methods: {
    request() {
      var self = this;
      var areaId = this.$route.query.id
      var url = '/yitai/admin/areaStatistic';
      var params = {
        areaId: areaId,
        date: self.date.getFullYear() + '-' + (self.date.getMonth() + 1) + '-' + self.date.getDate()
      };
      var success = function(response) {
        var series = response.info;
        self.init('main', series)
      }
      var fail = function() {}
      var complete = function() {}
      utils.requestLoading(url, params, success, fail, complete)
    },
    init(element, series) {
      var indexList = []
      for (var i = 1; i <= 96; i++) {
        var time = new Date();
        time.setHours(0);
        time.setMinutes(0);
        time.setSeconds(0);
        time.setMilliseconds(0);

        time.setMinutes(15 * i);
        indexList.push(this.fixTime(time.getHours()) + ':' + this.fixTime(time.getMinutes()));
      }
      var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById(element));
      // 绘制图表
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Ia', 'Ib', 'Ic', 'In'],
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#ffff00', '#00ff00', '#ff0000', '#0000ff'],
        backgroundColor: '#222',
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: indexList,
          name: '时间',
          nameTextStyle: {
            color: '#fff'
          },
          axisLabel: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '单位 A',
          nameTextStyle: {
            color: '#fff'
          },
          axisLabel: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        series: series
      };
      myChart.setOption(option)
    },
    back() {
      window.history.back();
    },
    getAreaInfo() {
      var self = this;
      var areaId = self.$route.query.id;
      var url = '/yitai/admin/areaInfo';
      var params = { id: areaId };
      var success = function(response) {
        self.location = response.info.location;
        self.areaNo = response.info.areaNo;
      };
      var fail = function() {};
      var complete = function() {};
      utils.requestLoading(url, params, success, fail, complete);
    },
    fixTime(i) {
      if (i < 10) {
        i = "0" + i;
      }
      return i;
    }
  }
}

</script>
<style scoped rel="stylesheet/scss" lang="scss">
.top-title {
  font-size: 18px;
  font-weight: bold;
  padding: 0 20px;
}

.page {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

</style>
